<template>
  <div class="box">
    <div class="class-list">
      <h3>标签</h3>
      <div class="class-item">
        <div v-for="(item) in classList" :key="item.id" @click="detailedFun(item.id)">
          <i class="el-icon-folder-opened"></i>
          {{ item.name }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import{Class} from '../units/api.js'
export default {
  data() {
    return {
      classList:[]
    };
  },
  created() {
    this.getClass()
  },
  methods: {
    async getClass() {
      let res = await Class();
      console.log("这是子组件获取的类型列表", res);
      if (res.status == 200) {
        this.classList = res.data.data;
      }
    },
    detailedFun(id){
      console.log(id);
      this.$router.push({path:'classAnd',query:{MyId:id}})
    }
  },
};
</script>

<style scoped>
.box{
  margin: 1vw;
  background-color: white;
}
.class-item>div{
  padding-left:30px ;
  text-align: start;
  height: 50px;
  line-height: 50px;
}
.class-item>div:hover{
  background-color: #f3f4f6;
  color: #0099ff;
}
</style>